<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>登录</title>
  <link rel="stylesheet" href="css/login.css" />
  <link rel="stylesheet" href="css/register.css" />
</head>

<body>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <div class="wrap" id="app">
    <!-- 头部logo -->
    <header class="header-wrap">
      <div class="header-logo"></div>
    </header>
    <!-- 主要内容 -->
    <section class="main-wrap">
      <div class="layout_panel">
        <div class="mian-content">
          <!-- 选择标题 -->
          <div id="nav-tabs" class="nav_tabs">
            <a class="navtab-link now" href="javascript: void(0);">登录</a>
            <span class="line"></span>
            <a class="navtab-link" href="javascript: void(0);">注册</a>
          </div>
          <form action="#" method="post" >
            <div class="loginbox">
              <!-- 帐号登录 -->
              <div class="btn login_area">
                
                <input class="item_account" type="text" name="user" id="username" placeholder="邮箱/手机号码/小米ID" v-model="phone" >
                <span style="color: red;font-size: smaller;">{{message}}</span>
                <input class="item_account" type="password" placeholder="密码" id="pwd" name="password" v-model="passwd">
                <span style="color: red;font-size: smaller;">{{message2}}</span>
                <input class="btnadpt item_account" id="login-button" type="button" value="登录" @click="login()">
                <div class="other_panel myclear">
                  <div class="login_type_link">
                    <a href="javascript: void(0);">手机短信登录/注册</a>
                  </div>
                  <div class="links_area">
                    <a href="register.html">立即注册</a>
                    <span>|</span>
                    <a href="javascript: void(0);">忘记密码？</a>
                  </div>
                  <div class="other_login_type">
                    <p>----------------------------其他方式登录----------------------------</p>
                    <div id="sns-login-links" class="oth_type_links">
                      <a class="icon_type btn_qq" data-type="qq" href="javascript: void(0);" title="QQ登录"
                        target="_blank">
                        <i class="btn_sns_icontype icon_default_qq"></i>
                      </a>
                      <a class="icon_type btn_weibo" data-type="weibo" href="javascript: void(0);" title="微博登录"
                        target="_blank">
                        <i class="btn_sns_icontype icon_default_weibo"></i>
                      </a>
                      <a class="icon_type btn_alipay" data-type="alipay" href="javascript: void(0);" title="支付宝登录"
                        target="_blank">
                        <i class="btn_sns_icontype icon_default_alipay"></i>
                      </a>
                      <a class="icon_type btn_weixin" data-type="weixin" href="javascript: void(0);" title="微信登录"
                        target="_blank">
                        <i class="btn_sns_icontype icon_default_weixin"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class=" btn">
                <div class="regbox">
                  <h4 class="tit_normal">国家/地区</h4>
                  <div class="listwrap">
                    <div class="listtit">
                      <div id="tits" class="tits">
                        <p class="result-select-regions">中国</p>
                        <i class="icon_cirarr"></i>
                      </div>
                      <div class="country-container-panel">
                        <div class="country-container">
                          <div class="search-code"><input type="text" class="search-code-input"></div>
                          <div class="country-code">
                            <div class="container countrycode-container-V">
                              <div class="header">V</div>
                              <ul class="list">
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="VU">瓦努阿图</span>
                                  <span class="record-code"></span>
                                </li>
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="VA">梵蒂冈</span>
                                  <span class="record-code"></span>
                                </li>
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="VE">委内瑞拉</span>
                                  <span class="record-code"></span>
                                </li>
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="VN">越南</span>
                                  <span class="record-code"></span>
                                </li>
                              </ul>
                            </div>
                            <div class="container countrycode-container-W">
                              <div class="header">W</div>
                              <ul class="list">
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="WF">瓦利斯和富图纳</span>
                                  <span class="record-code"></span>
                                </li>
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="EH">西撒哈拉</span>
                                  <span class="record-code"></span>
                                </li>
                              </ul>
                            </div>
                            <div class="container countrycode-container-Y">
                              <div class="header">Y</div>
                              <ul class="list">
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="YE">也门</span>
                                  <span class="record-code"></span>
                                </li>
                              </ul>
                            </div>
                            <div class="container countrycode-container-Z">
                              <div class="header">Z</div>
                              <ul class="list">
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="ZM">赞比亚</span>
                                  <span class="record-code"></span>
                                </li>
                                <li class="record clearfix">
                                  <span class="record-country" data-code="" data-brief="ZW">津巴布韦</span>
                                  <span class="record-code"></span>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="region_tip_text">成功注册帐号后，国家/地区将不能被修改</div>
                  <h4 class="tit_normal">手机号码</h4>
                  <div class="listwrap_inside_panel c_b">
                    <div id="select-cycode" class="listwrap">
                      <div class="listtit" id="reg-phone-select-cty">
                        <div class="tits">
                          <p id="select-cycode-result">+86</p>
                          <i class="icon_arrow"></i>
                        </div>
                      </div>
                      <div class="country-container-panel">
                        <div class="country-container">
                          <div class="search-code">
                            <i class="icon_search"></i>
                            <input type="text" class="search-code-input">
                          </div>
                          <div class="country-code">
                  
                            <div class="container countrycode-container-Y">
                              <div class="header">Y</div>
                              <ul class="list">
                                <li class="record clearfix"><span class="record-country" data-code="+967"
                                    data-brief="YE">也门</span><span class="record-code">+967</span></li>
                              </ul>
                            </div>
                            <div class="container countrycode-container-Z">
                              <div class="header">Z</div>
                              <ul class="list">
                                <li class="record clearfix"><span class="record-country" data-code="+260"
                                    data-brief="ZM">赞比亚</span><span class="record-code">+260</span></li>
                                <li class="record clearfix"><span class="record-country" data-code="+263"
                                    data-brief="ZW">津巴布韦</span><span class="record-code">+263</span></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="inputbg">
                      <input type="hidden" class="select-regions-input" name="region" value="CN">
                      <label class="labelbox" for="">
                        <input id="text" type="tel" name="phone" data-type="PH" placeholder="请输入手机号码" v-model="phone2">
                        <span style="color: red;font-size: smaller; display: block;">{{message3}}</span>

                      </label>
                    </div>
                   
                  </div>
                  <div class="inputcode">
                    <label class="labelbox" style="width: 235px;">
                      <input class="resendcode" type="text" placeholder="请输入验证码" name="ticket" >
                    </label>
                    <button class="remain"><a class="color333 send-status" href="javascript:void(0)">重新发送</a></button>
                  </div>
                 
                  <div class="sns_unavaliable" style="margin-top: 10px;margin-bottom: 10px;">
                    <a target="_blank" href="javascript:;">收不到验证码？</a>
                  </div>
                  <input id="btn" class="btn332 btn_reg_1 submit-step"  type="button" value="立即注册"
                    @click="register()">
                  
                  <div class="privacy_box">
                    <div class="msg">
                      <label class="n_checked select-privacy">
                        已阅读并同意：小米
                        <a href="javascript: void(0);" class="inspect_link agreement_link" title="用户协议"
                          target="_blank">用户协议</a>
                        和
                        <a href="javascript: void(0);" class="inspect_link privacy_link" title=" 隐私政策 " target="_blank">
                          隐私政策 </a>
                      </label>
                    </div>
                  </div>
                </div>
            </div>
          </form>
        </div>
      </div>
    </section>
    <!-- 底部声明 -->
    <footer class="footer-wrap">
      <div class="myclear">
        <ul class="lang-select-list">
          <li><a class="current" href="javascript: void(0);">简体</a>|</li>
          <li><a href="javascript: void(0);">繁体</a>|</li>
          <li><a href="javascript: void(0);">English</a>|</li>
          <li><a href="javascript: void(0);">常见问题</a>|</li>
          <li><a href="javascript: void(0);">隐私政策</a></li>
        </ul>
      </div>
      <div class="footer-intro">
        小米公司版权所有-京ICP备10046444-
        <a class="beian-record-link" target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134">
          <span><img src="img/login/ghs.png"></span>
          京公网安备11010802020134号
        </a>
        -京ICP证110507号
      </div>
    </footer>
  </div>

  <script type="text/javascript">
    const app = Vue.createApp({
      data() {
        return {
          phone:"",
          phone2:"",
          passwd:"",
          message:'',
          message2:'',
          message3:'',
        }
      },
      methods: {
       login(){
        if(this.phone==null||this.phone==''){
          return this.message = '请输入手机号码'
        }else if(this.passwd==null||this.passwd==''){
          return [this.message2 = '请输入密码',this.message = '']
        }else if(this.phone.length!=11||this.phone==NaN){
          return this.message = '手机号码有误，请重新输入'
        }else{
          alert('登录成功')
          return [this.message2 = '', this.message = '']
        }
       },
       register(){
        if (this.phone2 == null || this.phone2 == '') {
           return this.message3 = '请输入手机号码'
         }
       }
      },
      mounted() {

        //下拉选择
        let tits = document.getElementById('tits');
        let titsLis = tits.nextElementSibling.getElementsByClassName('record');
        let titsText = tits.getElementsByTagName('p')[0];

        let phoneCty = document.getElementById('reg-phone-select-cty');
        let phoneCtyLis = phoneCty.nextElementSibling.getElementsByClassName('record');
        let phoneCtyText = phoneCty.getElementsByTagName('p')[0];
        // 地名
        tits.onclick = function () {
          tits.nextElementSibling.style.display = 'block';
        }
        for (let i = 0; i < titsLis.length; i++) {
          titsLis[i].onclick = function () {
            titsText.innerHTML = titsLis[i].getElementsByTagName('span')[0].innerHTML;
            phoneCtyText.innerHTML = phoneCtyLis[i].getElementsByTagName('span')[1].innerHTML;
            this.id = phoneCtyText.innerHTML;
            tits.nextElementSibling.style.display = 'none';
          }.bind(this)
        }
        // 编号
        phoneCty.onclick = function () {
          phoneCty.nextElementSibling.style.display = 'block';
        }
        for (let i = 0; i < phoneCtyLis.length; i++) {
          phoneCtyLis[i].onclick = function () {
            phoneCtyText.innerHTML = phoneCtyLis[i].getElementsByTagName('span')[1].innerHTML;
            phoneCty.nextElementSibling.style.display = 'none';
          }
        }

          // 切换登录方式
          
            // 获取节点
            let navTabs = document.getElementById('nav-tabs').getElementsByTagName('a');
            let loginbox = document.getElementById('nav-tabs').nextElementSibling.getElementsByClassName('btn');
            loginbox[1].style.display = 'none';
            let _index = 0;

            // 切换登录方式
            for (let i = 0; i < navTabs.length; i++) {
              navTabs[i].onclick = function () {
                loginbox[i].style.display = 'block';
                loginbox[_index].style.display = 'none';
                navTabs[i].classList.add('now');
                navTabs[_index].classList.remove('now');
                _index = i;
              }
            }
        }

    }).mount("#app")
    
  </script>
</body>

</html>